<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Sample Applications for Okta</title>
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" crossorigin="anonymous">
  <style>
    body { padding-top: 50px; }
  </style>
</head>
<body>

  <div class="ui text container">
    <h1 class="ui large header"><img class="ui large image" src="logo.png" />Vue Sample Applications for Okta</h1>
    <div class="ui divider"></div>

    <p>Congratulations! You've successfully started this application.</p>
    <p>Please find the sample that fits your use-case from the table below.</p>

    <table class="ui celled table">
      <thead>
        <tr>
          <th>Sample</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="Sample"><a href="/okta-hosted-login">Okta-Hosted Login</a></td>
          <td data-label="Description">A Vue application that will redirect the user to the Okta-Hosted login page for authentication.  The user is redirected back to the Vue application after authenticating.</td>
        </tr>
        <tr>
          <td data-label="Sample"><a href="/custom-login">Custom Login</a></td>
          <td data-label="Description">A Vue application that uses the Okta Sign-In Widget within the Vue application to authenticate the user.</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>
